<template>
  <div style="height: 100%">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/base/survey/index' }">问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>问卷详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="24" style="height: 100%; padding-top: 20px;">
      <el-col :span="6" style="height: 100%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <div class="grid-content bg-purple" style="padding: 15px">
          <el-descriptions :title="survey.name" :column="1">
            <el-descriptions-item label="所属公司" labelStyle="color: black; font-weight: bold;">{{survey.companyName}}
            </el-descriptions-item>
            <el-descriptions-item label="问卷类型" labelStyle="color: black; font-weight: bold;">
              <el-tag size="small">{{survey.collectType ? survey.collectType.desc : ""}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开场白" labelStyle="color: black; font-weight: bold;">{{survey.startShow}}
            </el-descriptions-item>
            <el-descriptions-item label="结束语" labelStyle="color: black; font-weight: bold;">{{survey.endShow}}
            </el-descriptions-item>
            <el-descriptions-item label="问卷状态" labelStyle="color: black; font-weight: bold;" v-if="survey.state">
              <el-tag size="small" :type="survey.state.value == 2 ? 'success' : 'info'" >
                {{survey.state.desc}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" labelStyle="color: black; font-weight: bold;">{{survey.createAt}}
            </el-descriptions-item>
            <el-descriptions-item label="不清楚数" labelStyle="color: black; font-weight: bold;">{{survey.unclearCount}}
            </el-descriptions-item>
            <el-descriptions-item label="收集数量" labelStyle="color: black; font-weight: bold;">{{survey.currentNum}} /
              {{survey.collectNum}}
            </el-descriptions-item>
            <el-descriptions-item label="不清楚数" labelStyle="color: black; font-weight: bold;">{{survey.unclearCount}}
            </el-descriptions-item>
          </el-descriptions>


        </div>
      </el-col>
      <el-col :span="18"
              style="height: 100%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding-left: 0px; padding-right: 0px;">
        <div class="grid-content bg-purple" style="height: 100%">
          <el-tabs type="border-card" style="height: 700px;">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-date"></i> 样本信息</span>
              <!--列表-->
              <!-- 搜索筛选 -->
              <el-form :inline="true" :model="answerTable.pageParams" class="user-search">
                <el-form-item label="搜索：">
                </el-form-item>
                <el-form-item label="" v-for="(filter, index) in answerTable.pageParams.filters" :key="index">
                  <el-input size="small" v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName"
                            v-if="filter.showAble"
                            v-bind:fieldValue="filter.fieldValue" v-bind:compare="filter.compare"
                            :disabled="filter.readonly"
                            @keyup.enter.native="search"
                            :placeholder="filter.placeholder" :readonly="filter.readonly" clearable/>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" type="primary" icon="el-icon-search" @click="initAnswerTable">搜索</el-button>

                  <el-button size="small" type="warning" icon="el-icon-circle-check" @click="checkAnswers">复核
                  </el-button>
                </el-form-item>
              </el-form>

              <el-table size="small" :data="answerTable.list" highlight-current-row v-loading="loading" border
                        v-if="answerTable.list.length !==0" height="530"
                        element-loading-text="拼命加载中"
                        style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">
                <el-table-column align="center" type="selection">
                </el-table-column>
                <el-table-column prop="label" label="标签" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="访问对象" width="100">
                </el-table-column>
                <el-table-column prop="seat" label="收集坐席" width="70">
                </el-table-column>
                <el-table-column prop="workNum" label="收集工号" width="70">
                </el-table-column>
                <el-table-column prop="valid" label="是否有效" width="70">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.valid === 1 ? 'success': 'danger'"
                      disable-transitions>{{scope.row.valid | yesNo}}
                    </el-tag>

                  </template>
                </el-table-column>
                <el-table-column prop="inValidMsg" label="无效原因" width="100">
                </el-table-column>
                <el-table-column prop="reviewStatus" label="是否复核" width="70">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.reviewStatus === 0 ? 'danger' : 'success'"
                      disable-transitions>{{scope.row.reviewStatus | isReview}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="reviewMsg" label="复核信息" width="100">
                </el-table-column>
                <el-table-column prop="createAt" label="收集时间" width="140">
                </el-table-column>
                <el-table-column prop="startTime" label="通话开始时间" width="140">
                </el-table-column>
                <el-table-column prop="callLastsTime" label="通话时长（秒）" width="140">
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <Pagination v-bind:child-msg="answerTable.pager" @callFather="callFather" v-if="answerTable.length !==0"/>

              <el-empty :image-size="150" v-if="answerTable.list.length==0"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="问卷信息">
              <span slot="label"><i class="el-icon-date"></i> 问卷信息</span>
              <el-collapse accordion>
                <el-collapse-item :title="item.orderNum + '. ' + item.name" :name="item.orderNum"
                                  v-for="(item, index) in questions" :key="index">
                  <div style="padding-left:10px; color: #909399;" v-for="(option, i) in item.children" :key="i">
                    <div>
                      <span>{{option.orderNum}}. {{option.name}}</span>
                      <span class="next-q">
                        <span>当前数： <span class="val">{{option.current ? option.current : "无"}}</span></span>
                        <span>配额数： <span class="val">{{option.configration ? option.configration : "无限制"}}</span></span>
                        <span>下一题： <span class="val">{{option.target ? option.target : "结束"}}</span></span>
                      </span>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>

            </el-tab-pane>
            <el-tab-pane label="开发中">开发中</el-tab-pane>
            <el-tab-pane label="开发中">开发中</el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
    </el-row>


  </div>
</template>
<style>
  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 50px;
    background: #e8f3fe;
    margin: 10px;
    color: #000c28;
    list-style: none;
  }

  .infinite-list-wrapper {
    padding-left: 0;
    height: 434px;
  }

  .question-name {
    font-size: 14px;
    padding-left: 10px;
  }

  .val {
    font-weight: bold;
    color: #a37127;
  }

  .next-q {
    position: absolute;
    right: 20px;
  }
</style>
<script>
  import Pagination from "../../../components/Pagination.vue";
  import {answerList, questionList, surveydetail} from "../../../api/baseMG";

  export default {
    data() {
      return {
        loading: false,
        count: 10,
        questions: [],
        list: [],
        pageParams: {
          id: this.$route.query.id
        },
        survey: {
          id: 1
        },
        searchParams: {
          surveyId: null,
        },
        answerTable: {
          list: [],
          pager: {
            currentPage: 1,
            pageSize: 10,
            total: 10
          },
          pageParams: {
            page: 1,
            perPage: 10,
            filters: [
              {
                showAble: false,
                readonly: true,
                placeholder: "默认",
                fieldName: "surveyId",
                compare: "=",
                fieldValue: this.$route.query.id
              },
              {
                showAble: true,
                readonly: false,
                placeholder: "默认",
                fieldName: "phone",
                compare: "like",
                fieldValue: null
              }
            ],
          }
        }
      }
    },
    created() {
      this.initParams();
      this.getDetail();
      this.initAnswerTable();
    },
    components: {
      Pagination
    },
    methods: {
      checkAnswers() {
        this.$router.push({path: "/base/survey/checked", query: {id: this.pageParams.id}});
      },
      initAnswerTable() {
        this.getAnswers(this.answerTable.pageParams);
      },
      getAnswers(params) {
        console.log(params);
        answerList(params).then(resp => {
          if (resp.success) {
            this.answerTable.list = resp.data.list;
            this.answerTable.pager.currentPage = resp.data.pageNum;
            this.answerTable.pager.pageSize = resp.data.pageSize;
            this.answerTable.pager.total = resp.data.total;
          }
        })
      },
      initParams() {
        this.survey.id = this.$route.query.id;
        this.searchParams.surveyId = this.survey.id;
        this.getList(this.searchParams);
      },
      getDetail(id) {
        if (!id) {
          id = this.survey.id;
        }
        surveydetail(id).then(resp => {
          if (resp.success) {
            this.loading = false;
            this.survey = resp.data;
          }
        })
      },
      search() {
        console.log(this.searchParams);
        this.getList(this.searchParams);
      },
      getList(params) {
        questionList(params).then(resp => {
          if (resp.success) {
            this.questions = resp.data;
          }
        })
      },
      callFather(param) {
        this.answerTable.pageParams.page = param.currentPage;
        this.answerTable.pageParams.perPage = param.pageSize;
        this.getAnswers(this.answerTable.pageParams);
      }
    }


  }

</script>
